const {src, dest, series, parallel, watch} = require('gulp')
const path = require('path')

const gulpwebserver = require('gulp-webserver')//开启webserver服务
const webpackStream = require('webpack-stream')
const gulpSass = require('gulp-sass')
const proxy = require('http-proxy-middleware')
const del = require('del')
//打包HTML
function copyhtml(){
    return src('./*.html')
        .pipe(dest('./dev'))
}
//打包img
function copyimages(){
    return src('./src/images/**/*')
        .pipe(dest('./dev/images'))
}
//打包libs
function copylibs(){
    return src('./src/libs/**/*')
        .pipe(dest('./dev/libs'))
}
//打包iconsy
function copyicons(){
    return src('./src/icons/**/*')
        .pipe(dest('./dev/icons'))
}
//打包JS并把ES678编译成ES5
function packjs(){
    return src('./src/**/*')
    .pipe(webpackStream({
        mode: 'development',

        entry: {
            app: './src/app.js'
        },

        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, './dev')
        },

        // 将ES6-ES8 代码转换成 ES5
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: ['@babel/plugin-transform-runtime']
                        }
                    }
                },
                {
                    test: /\.html$/, 
                    loader: "string-loader"
                }
            ]
        }
    }))
    .pipe(dest('./dev/scripts'))
}
//打包SASS并编译成CSS
function packCss(){
    return src('./src/styles/*.scss')
      .pipe(gulpSass().on('error', gulpSass.logError))
      .pipe(dest('./dev/styles/'));
}
//开启webserver服务
function webserver(){
    return src('./dev')
        .pipe(gulpwebserver({
            port: 8888,
            livereload: true,
            middleware: [
                proxy('/api',{
                    target: 'https://m.lagou.com',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    },
                }),

                proxy('/myjson',{
                    target: 'http://localhost:9999',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/myjson': ''
                    },
                }),


                proxy('/damaijson',{
                    target: 'https://search.damai.cn',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/damaijson': ''
                    },
                })
            ]
        }))
}
// 删除文件时dev同步删除
function clear(target){
    return function(){
        return del(target)
    }
}

function watcher(){
    watch('./*.html', series(clear('./dev/*.html'), copyhtml))
    watch('./src/libs/**/*', series(clear('./dev/libs'), copylibs))
    watch('./src/styles/**/*', series(clear('./dev/styles'), packCss))
    watch('./src/icons/**/*', series(clear('./dev/icons'), copyimages))
    watch('./src/images/**/*', series(clear('./dev/images'), copyimages))
    watch(['./src/**/*', '!./src/styles/**/*', '!./src/libs**/*', '!./images/**/*', '!./src/icons/**/*'], series(packjs))
}

exports.default = series(parallel(packjs, packCss, copyimages, copyicons, copylibs), copyhtml, webserver, watcher)
